<template>
  <div class="pack-page">
    <el-page-header style="padding-left: 20px" @back="goBack" content="打包">
    </el-page-header>
    <div class="header">
      <!-- <span style="margin-right: 20px; margin-top: 6px">打包</span> -->

      <el-checkbox-group v-model="checkList">
        <el-checkbox label="PDF"></el-checkbox>
        <el-checkbox label="STEP"></el-checkbox>
        <el-checkbox label="DWG"></el-checkbox>
        <el-checkbox label="DXF"></el-checkbox>
      </el-checkbox-group>

      <el-button
        style="margin-left: 20px"
        size="mini"
        type="success"
        round
        icon="el-icon-files"
        @click="toPack"
      >
        打 包
      </el-button>
      <el-button
        style="margin-left: 20px"
        size="mini"
        type="success"
        round
        icon="el-icon-message"
        @click="onSend"
      >
        发 送
      </el-button>
    </div>

    <div class="body">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-align="center"
        height="700"
        @selection-change="changeRow"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="Picker"
          label="标记者"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FBILLNO"
          label="单据号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="PickTime"
          label="标记时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALCODE"
          label="物料编码"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALNAME"
          label="物料名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALSPECIFICATION"
          label="规格型号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="UNITNAME"
          label="基本单位"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="挑图文件" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="F_AAA_PROJECTETD"
          label="项目交期"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FReqQty"
          label="申请数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FApproveQty"
          label="批准数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="单位数量" width="120" align="center">
        </el-table-column>

        <el-table-column prop="" label="备注" width="120" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template v-slot="{ row }">
            <el-button type="warning" plain @click="view(row)" size="small"
              >查看子零件</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="dialog">
      <el-dialog
        title="邮件发送"
        :visible.sync="isShow"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="sendForm" :model="sendForm" label-width="110px">
          <el-form-item label="抄送人">
            <el-input
              v-model="sendForm.CCMial"
              placeholder="请填写抄送人"
            ></el-input>
          </el-form-item>
          <el-form-item label="收件人">
            <el-input
              v-model="sendForm.ToMial1"
              placeholder="请填写抄送人"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select
              multiple
              v-model="sendForm.ToMial"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="ele in SupplierList"
                :key="ele.ID"
                :label="ele.FNAME"
                :value="ele.ID"
              ></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="密送人（手动输入）">
            <el-input placeholder="请填写密送人" v-model="form.desc"></el-input>
          </el-form-item> -->
          <el-form-item label="标题">
            <el-input
              placeholder="请填写"
              v-model="sendForm.subject"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 200px; overflow-y: hidden"
                v-model="sendForm.message"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-form-item>
          <el-form-item label="附件">
            <el-link :underline="false">{{ sendForm.File_Path }}</el-link>
          </el-form-item>
          <el-form-item>
            <el-button
              class="el-icon-position"
              type="success"
              @click="onSubmit"
              size="small"
            >
              发 送
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { PurchaseApiApi } from "@/api/procurement";
import { getSupplierListApi } from "@/api/sendlist";
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      form: {},
      sendForm: {
        CCMial: "",
        ToMial1: "",
        ToMial: [],
        subject: "",
        message: "",
        File_Path: "",
      },
      tableData: [],
      isShow: false,
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "simple", // or 'simple' default
      // checked: false,
      checkList: ["PDF", "DWG"],
      selectionList: [],
      SupplierList: [],
      IDlist: [],
    };
  },
  created() {
    console.log(this.$route.query.list);
    this.tableData = this.$route.query.list;
    this.getSupplierList();
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    async getSupplierList() {
      const res = await getSupplierListApi({
        postpara: {
          posttype: "getSupplierList",
        },
      });
      console.log(res);
      this.SupplierList = JSON.parse(res.data);
    },
    handleClose() {
      this.isShow = false;
    },

    async toPack() {
      if (!this.selectionList.length) {
        this.$message("请先选择数据");
        return;
      }
      const PackCodeList = this.selectionList.map((ele) => {
        return ele.MATERIALCODE;
      });
      const res = await PurchaseApiApi({
        postpara: {
          posttype: "PackFileByList",
        },
        ureentity: PackCodeList,
        PackUser: "admin",
        extensionentity: this.checkList,
      });
      console.log(res);
      // PackCodeList.forEach(async (ele) => {
      //   const res = await PurchaseApiApi({
      //     postpara: {
      //       posttype: "PackFile",
      //     },
      //     PackCode: ele,
      //     PackUser: "admin",
      //     ureentity: this.checkList,
      //   });
      //   console.log(JSON.parse(res.data));
      //   const data = JSON.parse(res.data);
      //   if (data.ReturnState !== "0100") {
      //     this.$message("未找到");
      //   }
      // });
    },
    changeRow(row) {
      console.log(row);
      this.selectionList = row;
    },
    async onSend() {
      this.IDlist = this.selectionList.map((ele) => {
        return ele.ID;
      });
      const data = this.selectionList.map((ele) => {
        return {
          ID: ele.ID,
          MATERIALCODE: ele.MATERIALCODE,
          MATERIALNAME: ele.MATERIALNAME,
          MATERIALSPECIFICATION: ele.MATERIALSPECIFICATION,
          UNITNAME: ele.UNITNAME,
          F_AAA_PROJECTETD: ele.F_AAA_PROJECTETD,
          FReqQty: ele.FReqQty,
          FApproveQty: ele.FApproveQty,
          FNUMBER: ele.FNUMBER,
          FEntryNote: ele.FEntryNote,
          FENTRYID: ele.FENTRYID,
          FBILLNO: ele.FBILLNO,
          PickFileName: ele.PickFileName,
          relfCol: [],
        };
      });
      const res = await PurchaseApiApi({
        postpara: {
          posttype: "getZipPath",
        },
        ureentity: data,
        ZipUer: "admin",
      });
      console.log(res);
      this.sendForm.File_Path = JSON.parse(res.data).zipPath;
      this.isShow = true;
    },
    async onSubmit() {
      this.sendForm.ToMial = this.sendForm.ToMial.join(",");
      const res = await PurchaseApiApi({
        postpara: {
          posttype: "sendEMail",
        },
        SendUser: "admin",
        seentity: this.sendForm,
        rebomentity: [
          {
            FBILLNO: "",
            FNUMBER: "",
            SavePath: "",
            PickFileName: "",
            MATERIALCODE: "",
            FENTRYID: "",
            MATERIALNAME: "公般经市",
          },
        ],
        ureentity: this.IDlist,
      });
      console.log(res);
      this.handleClose();
      if (res.data === "S0001") {
        this.$message.success("成功");
      } else {
        this.$message.error("失败");
      }
    },
    goBack() {
      // console.log("go back");
      this.$router.back();
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>;
<style lang="scss" scoped>
.pack-page {
  background-color: #fff;

  .header {
    display: flex;
    padding: 20px;
    align-items: center;
  }
  .body {
    padding: 20px;
  }
}
</style>